<template>
  <div style="border: #efefef solid 1px; height: calc(100vh - 100px);width: 100%;">
    <relation-graph ref="graphRef" :options="options">
      <template v-slot:node="{ node }" >
        <graph :node="node" @delNodes="delNodes" @addNodes="addNodes"></graph>
      </template>
    </relation-graph>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import RelationGraph from 'relation-graph/vue3'
import graph from './graph.vue'
const graphRef = ref(null)
const options = {
  // 脉络图配置项
  backgrounImage: '',
  backgrounImageNoRepeat: true,
  defaultLineWidth: 3,
  defaultJunctionPoint: 'ltrb',
  layouts: [
    {
      label: '中心',
      layoutName: 'tree',
      layoutClassName: 'seeks-layout-center',
      defaultJunctionPoint: 'border',
      defaultNodeShape: 0,
      defaultLineShape: 1,
      max_per_height: '200',
      from: 'left'
    }
  ],
  defaultLineMarker: {
    markerWidth: 0,
    markerHeight: 0,
    refX: 0,
    refY: 0,
    data: 'M 0 0, V 6, L 4 3, Z'
  },
  defaultLineShape: 5,
  defaultNodeShape: 1,
  findType: 1,
  defaultNodeBorderWidth: 0,
  defaultNodeBorderColor: '',
  defaultNodeFontColor: '#000000',
  defaultNodeColor: '#ffffff',
  hideNodeContentByZoom: false,
  allowShowMiniNameFilter: false,
  disableDragNode: true,
  defaultFocusRootNode: false,
  centerOffset_y: 400
}
let conventionDataArr = reactive({
  rootId: '9999999999',
  nodes: [
    { id: '9999999999', data: { type: 'condition', name: '', value: '', condition: '', dataType: '' }}
  ], lines: []
})
onMounted(() => {
  setJsonData(conventionDataArr)

  const events = []
  const stopFn = rrweb.record({
    emit(event) {
    // 将 event 存入 events 数组中
      events.push(event)
    }
  })

  setTimeout(() => {
    stopFn()

    console.log(JSON.stringify(events))

    const replayer = new rrweb.Replayer(events, {
      root: document.body,
      UNSAFE_replayCanvas: true
    })
    replayer.play()
  }, 10 * 1000)
})

const delNodes = (id) => {
  let { nodes, lines, rootId } = conventionDataArr
  // 获取到点击父级节点
  const parentData = lines.find(it => it.to === id)
  // 获取爷爷级的节点
  const parentDataParent = lines.find(it => it.to === parentData.from)
  // 根据父节点或取另一个字节点
  const childrenLine = lines.find(it => (it.from === parentData.from && it.to !== id))
  // 删除当前节点及父级节点
  nodes = nodes.filter(it => ![parentData.from, id].includes(it.id)).map(it => {
    return { id: it.id, data: it.data }
  })
  // 删除关联链接线条
  lines = lines.filter(it => ![it.from, it.to].includes(parentData.from))
  // 判断父节点是否为根节点
  if (parentData.from === rootId) {
    rootId = childrenLine.to
  } else {
    // 将另一个节点链接到父级节点的父节之点下
    lines.push({
      from: parentDataParent.from,
      to: childrenLine.to,
      lineShape: 2
    })
  }
  conventionDataArr = Object.assign({}, conventionDataArr, {
    rootId,
    nodes,
    lines
  })
  setJsonData(conventionDataArr)
}

const addNodes = (id) => {
  let { nodes, lines, rootId } = conventionDataArr
  // 获取到点击父级节点
  const parentData = lines.find(it => it.to === id)
  // 生成兄弟随机id
  const random = Math.floor(Math.random() * 10000000).toString()
  // 生成父级id
  const randomParent = Math.floor(Math.random() * 10000000).toString()
  nodes.push({
    id: random,
    data: { id: random, type: 'condition', name: '', value: '', condition: '', dataType: '' }
  })
  nodes.push({
    id: randomParent,
    data: { id: randomParent, type: '' }
  })
  // 判断当前节点是否为根节点
  if (rootId === id) {
    rootId = randomParent
  } else {
    lines = lines.filter(it => it.to !== id)
    lines.push({ from: parentData.from, to: randomParent, lineShape: 2 })
  }
  lines.push({ from: randomParent, to: id.toString(), lineShape: 2 })
  lines.push({ from: randomParent, to: random, lineShape: 2 })
  nodes = nodes.map(it => {
    return {
      id: it.id,
      data: it.data
    }
  })
  conventionDataArr = Object.assign({}, conventionDataArr, {
    rootId,
    nodes,
    lines
  })
  setJsonData(conventionDataArr)
}

// 渲染图谱数据
const setJsonData = (data) => {
  nextTick(() => {
    graphRef.value.setJsonData(data)
  })
}
</script>
<style lang="scss" scoped>
  :deep(.relation-graph .rel-node-checked) {
    box-shadow:none;
  }
</style>
